<template>
    <el-dialog
        :visible.sync="visible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        :title="title"
        fullscreen
    >
        <div>
            <div class="table-content">
                <monaco-editor
                    class="dataTransform"
                    :height="600"
                    :language="type == 'data' ? 'json' : 'javascript'"
                    v-model="code"
                ></monaco-editor>
                <avue-crud
                    ref="crud"
                    :data="tableData"
                    :option="tableOption"
                    @row-click="handleRowClick"
                >
                    <template slot-scope="scope" slot="menuLeft">
                        <el-button
                            type="danger"
                            icon="el-icon-plus"
                            size="small"
                            @click="handleCanvas"
                            >预览</el-button
                        >
                    </template>
                </avue-crud>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="setVisible(false)"
                    >取 消</el-button
                >
                <el-button type="primary" @click="submit" size="small"
                    >确 定</el-button
                >
            </span>
        </div>
    </el-dialog>
</template>

<script>
import { tip } from "@/config";
import { funEval } from "@/utils/utils";
import MonacoEditor from "@/page/components/editor";
import { website } from "../../config";
export default {
    components: { MonacoEditor },
    data() {
        return {
            code: [],
            tableOption: {
                index: true,
                height: 600,
                addBtn: false,
                editBtn: false,
                menu: false,
                refreshBtn: false,
                columnBtn: false,
                delBtn: false,
                column: []
            }
        };
    },
    props: {
        tableData: Array,
        visible: Boolean,
        type: String,
        value: [String, Object, Array],
        title: {
            type: String,
            default: "表格数据配置"
        }
    },
    watch: {
        value: {
            handler(val) {
                this.code = val;
            },
            immediate: true,
            deep: true
        },
        code: {
            handler(val) {
                this.tableOption.column = JSON.parse(val);
            }
        }
    },
    computed: {},
    created() {},
    methods: {
        handleClose() {
            this.setVisible(false);
        },
        submit() {
            let value = this.code;
            try {
                let base = `function(data,params,refs){return {}}`;
                funEval(value);
                if (["data"].includes(this.type)) value = funEval(value);
                this.$emit("submit", value);
                this.setVisible(false);
            } catch (error) {
                console.log(error);
                this.$message.error("数据格式有误");
            }
        },
        setVisible(val) {
            this.$emit("update:visible", val);
        },
        handleCanvas() {}
    }
};
</script>
<style lang="scss" scoped>
.table-content {
    display: flex;
    .dataTransform {
        width: 500px !important;
    }
    .avue-crud {
        margin: 0 30px;
        flex: 1;
    }
    // justify-content: space-between;
    // .monaco_editor_container {
    //     flex: 1;
    //     &:first-child {
    //         flex: 10;
    //     }
    // }
}
</style>
